বুটস্ট্রাপ ৫ এ ক্যারোসেল (Carousel) এবং স্লাইডার (Sliders) একটি অত্যন্ত জনপ্রিয় উপাদান, যা ছবির গ্যালারি, টেক্সট স্লাইড, বা অন্যান্য কন্টেন্ট স্লাইড করতে ব্যবহৃত হয়। ক্যারোসেল ইন্টারঅ্যাকটিভ এবং অ্যানিমেটেড স্লাইডিং পদ্ধতিতে কন্টেন্ট প্রদর্শন করে। এটি ওয়েবপেজে কন্টেন্ট বা ছবি স্লাইড করার জন্য ব্যবহৃত হয়, যা সাধারণত পেজে সীমিত জায়গায় আরও বেশি কন্টেন্ট বা ছবি প্রদর্শন করতে সহায়তা করে।
এখানে বুটস্ট্রাপ ৫ এর ক্যারোসেল এবং স্লাইডার তৈরি করার পদ্ধতি বিস্তারিতভাবে আলোচনা করা হচ্ছে।
বুটস্ট্রাপ ৫ এর ক্যারোসেল উপাদানটি একটি অ্যানিমেটেড স্লাইডার, যেখানে একাধিক ছবি বা কন্টেন্ট একের পর এক স্লাইড হয়। এটি খুব সহজেই কাস্টমাইজ করা যায় এবং রেসপন্সিভ।
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/800x300" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>প্রথম স্লাইড</h5>
<p>এটি প্রথম স্লাইডের বিবরণ।</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x300" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>দ্বিতীয় স্লাইড</h5>
<p>এটি দ্বিতীয় স্লাইডের বিবরণ।</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x300" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>তৃতীয় স্লাইড</h5>
<p>এটি তৃতীয় স্লাইডের বিবরণ।</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
এখানে:
carousel: এটি ক্যারোসেল উপাদানটি তৈরির জন্য ব্যবহৃত হয়।carousel-inner: স্লাইডগুলোর কন্টেন্ট (ইমেজ বা টেক্সট) ধারণ করে।carousel-item: প্রতিটি স্লাইডকে ডিফাইন করে।carousel-indicators: স্লাইডিং ইনডিকেটর (ডট) প্রদর্শন করে, যা স্লাইডের অবস্থান দেখায়।carousel-control-prev এবং carousel-control-next: পূর্ববর্তী এবং পরবর্তী স্লাইডে নেভিগেট করার জন্য বাটন।বুটস্ট্রাপ ৫ এ স্লাইডার তৈরির জন্য সাধারণত Carousel ব্যবহার করা হয়। তবে, কাস্টম স্লাইডার বা রেঞ্জ স্লাইডার তৈরি করতে আপনি Input Range ব্যবহার করতে পারেন।
<div class="container mt-5">
<h4>ভলিউম স্লাইডার</h4>
<input type="range" class="form-range" id="customRange1" min="0" max="100" step="1" value="50">
<label for="customRange1" class="form-label">ভলিউম: <span id="sliderValue">50</span></label>
</div>
<script>
const slider = document.getElementById('customRange1');
const output = document.getElementById('sliderValue');
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
এখানে:
form-range: বুটস্ট্রাপের ক্লাস যা স্লাইডারের জন্য স্টাইলিং প্রদান করে।min, max, step: স্লাইডারের মানের পরিসীমা নির্ধারণ করে।oninput: যখন স্লাইডারটি ব্যবহারকারী দ্বারা পরিবর্তিত হবে, তখন এটি ডাইনামিকভাবে মানটি আপডেট করে।বুটস্ট্রাপ ৫ এর ক্যারোসেল অ্যানিমেশন হিসেবে স্লাইড ট্রানজিশন প্রভাব প্রদর্শন করে, যেমন fade বা slide। আপনি যদি কোনো নির্দিষ্ট অ্যানিমেশন ইফেক্ট চান, তবে CSS দিয়ে কাস্টম অ্যানিমেশন যোগ করতে পারেন।
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/800x300" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x300" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x300" class="d-block w-100" alt="...">
</div>
</div>
</div>
এখানে:
carousel-fade ক্লাসটি ব্যবহৃত হয়েছে, যা ফেড অ্যানিমেশন যোগ করবে, অর্থাৎ একটি স্লাইড পরবর্তী স্লাইডের মধ্যে ধীরে ধীরে মেলে যাবে।বুটস্ট্রাপ ৫ এর ক্যারোসেল এবং স্লাইডার অত্যন্ত ফ্লেক্সিবল উপাদান যা বিভিন্ন কন্টেন্ট বা ছবি স্লাইড করার জন্য ব্যবহৃত হয়। ক্যারোসেল ব্যবহার করে আপনি একাধিক স্লাইডে ছবি বা কন্টেন্ট দেখাতে পারেন এবং স্লাইডারের মাধ্যমে বিভিন্ন পরামিতির মান নির্বাচন করতে পারেন। এছাড়া, আপনি অ্যানিমেশন ব্যবহার করে আরও ইন্টারঅ্যাকটিভ স্লাইডিং ইফেক্ট তৈরি করতে পারেন।
ক্যারোসেল হল একটি স্লাইডিং গ্যালারি বা স্লাইডার যা একাধিক কন্টেন্ট যেমন ছবি, টেক্সট বা অন্যান্য এলিমেন্ট একসাথে প্রদর্শন করতে ব্যবহার করা হয়। বুটস্ট্রাপ ৫-এ ক্যারোসেল ব্যবহার করা খুব সহজ এবং এর মধ্যে অনেক কাস্টমাইজেশন অপশন থাকে। এটি সাধারণত ওয়েব পেজে ইমেজ গ্যালারি, প্রোডাক্ট শোকার্স, বা স্লাইডিং বোলেটিন প্রদর্শন করতে ব্যবহৃত হয়।
বুটস্ট্রাপ ৫ এর ক্যারোসেল তৈরি করতে নিম্নলিখিত উপাদানগুলো প্রয়োজন হয়:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Carousel Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Carousel Example -->
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<!-- Carousel Indicators -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<!-- Carousel Inner -->
<div class="carousel-inner">
<!-- Slide 1 -->
<div class="carousel-item active">
<img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>প্রথম স্লাইড শিরোনাম</h5>
<p>এটি প্রথম স্লাইডের বর্ণনা।</p>
</div>
</div>
<!-- Slide 2 -->
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>দ্বিতীয় স্লাইড শিরোনাম</h5>
<p>এটি দ্বিতীয় স্লাইডের বর্ণনা।</p>
</div>
</div>
<!-- Slide 3 -->
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>তৃতীয় স্লাইড শিরোনাম</h5>
<p>এটি তৃতীয় স্লাইডের বর্ণনা।</p>
</div>
</div>
</div>
<!-- Carousel Controls -->
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">পূর্ববর্তী</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">পরবর্তী</span>
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
carousel: এটি ক্যারোসেল কন্টেইনার। এতে সমস্ত স্লাইড আইটেম এবং নিয়ন্ত্রণ উপাদান থাকবে।carousel-indicators: এই এলিমেন্টটি ছোট ছোট বুলেট পয়েন্ট গুলি তৈরি করে, যা ইউজারকে জানায় কোন স্লাইডটি বর্তমানে প্রদর্শিত হচ্ছে।carousel-item: প্রতিটি স্লাইড বা আইটেম। এখানে আপনি ইমেজ, টেক্সট বা অন্যান্য কন্টেন্ট রাখতে পারেন।carousel-caption: এটি ক্যারোসেল আইটেমের নিচে প্রদর্শিত টেক্সট ক্যাপশন।carousel-control-prev এবং carousel-control-next: পূর্ববর্তী এবং পরবর্তী স্লাইডে নেভিগেট করার জন্য বাটন।বুটস্ট্রাপ ৫-এ ক্যারোসেলটি কাস্টমাইজযোগ্য এবং বিভিন্ন সেটিংস আছে যেগুলি আপনি data-bs-ride, interval, এবং keyboard এর মাধ্যমে কনফিগার করতে পারেন।
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2000" data-bs-pause="hover">
<!-- Your carousel content here -->
</div>
এখানে:
data-bs-ride="carousel": এটি ক্যারোসেলকে স্বয়ংক্রিয়ভাবে চালু করার জন্য ব্যবহার করা হয়।data-bs-interval="2000": স্লাইড পরিবর্তনের সময়সীমা (এখানে ২ সেকেন্ড)।data-bs-pause="hover": যখন ইউজার স্লাইডের উপর হোভার করবেন, তখন ক্যারোসেল থেমে যাবে।বুটস্ট্রাপ ৫-এর ক্যারোসেল একটি শক্তিশালী এবং সহজে কাস্টমাইজযোগ্য উপাদান যা স্লাইডিং ইফেক্টের মাধ্যমে একাধিক কন্টেন্ট প্রদর্শন করতে সাহায্য করে। এটি বিভিন্ন ধরনের মিডিয়া যেমন ইমেজ, টেক্সট, ভিডিও ইত্যাদি একত্রে দেখানোর জন্য ব্যবহৃত হয়। ক্যারোসেলের মধ্যে বিভিন্ন কনফিগারেশন প্যারামিটার রয়েছে, যেমন স্বয়ংক্রিয় স্লাইডিং, নিয়ন্ত্রণ বাটন এবং বুলেট পয়েন্টস, যা ব্যবহারকারীকে আরো ইন্টারেকটিভ অভিজ্ঞতা দেয়।
বুটস্ট্রাপ ৫ এর কারousel (Carousel) একটি ইন্টারেক্টিভ স্লাইডিং কম্পোনেন্ট যা ব্যবহারকারীদের বিভিন্ন কন্টেন্ট (যেমন, ছবি, টেক্সট, বা অন্যান্য উপাদান) স্লাইড আকারে দেখানোর সুযোগ দেয়। এর মধ্যে মাল্টিপল স্লাইডস এবং স্লাইড ইনডিকেটরস যোগ করার মাধ্যমে, আপনি একটি ডাইনামিক স্লাইডিং অভিজ্ঞতা তৈরি করতে পারেন, যেখানে ব্যবহারকারী স্লাইডগুলির মধ্যে নেভিগেট করতে পারবেন এবং স্লাইড ইনডিকেটরসের মাধ্যমে কোন স্লাইডে আছেন তা জানতে পারবেন।
বুটস্ট্রাপ ৫ এর Carousel কম্পোনেন্টটি মাল্টিপল স্লাইডস এবং স্লাইড নেভিগেশনের জন্য প্রস্তুত। এর মাধ্যমে আপনি একাধিক স্লাইডের মধ্যে অটোমেটিক বা ম্যানুয়াল স্লাইডিং অ্যাকশন তৈরি করতে পারেন। এখানে প্রতিটি স্লাইডের জন্য একটি carousel-item ব্যবহার করা হয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Slides and Indicators</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<!-- স্লাইড ইনডিকেটরস -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<!-- স্লাইড কন্টেন্ট -->
<div class="carousel-inner">
<!-- প্রথম স্লাইড -->
<div class="carousel-item active">
<img src="https://via.placeholder.com/800x400?text=Slide+1" class="d-block w-100" alt="Slide 1">
<div class="carousel-caption d-none d-md-block">
<h5>Slide 1</h5>
<p>এটি প্রথম স্লাইডের কন্টেন্ট।</p>
</div>
</div>
<!-- দ্বিতীয় স্লাইড -->
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400?text=Slide+2" class="d-block w-100" alt="Slide 2">
<div class="carousel-caption d-none d-md-block">
<h5>Slide 2</h5>
<p>এটি দ্বিতীয় স্লাইডের কন্টেন্ট।</p>
</div>
</div>
<!-- তৃতীয় স্লাইড -->
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400?text=Slide+3" class="d-block w-100" alt="Slide 3">
<div class="carousel-caption d-none d-md-block">
<h5>Slide 3</h5>
<p>এটি তৃতীয় স্লাইডের কন্টেন্ট।</p>
</div>
</div>
</div>
<!-- পূর্ববর্তী এবং পরবর্তী বাটন -->
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
carousel-indicators: এই সেকশনে স্লাইড ইনডিকেটরগুলো অন্তর্ভুক্ত থাকে। প্রতিটি ইনডিকেটর একটি বাটনের মতো কাজ করে যা নির্দিষ্ট স্লাইডে নেভিগেট করতে সাহায্য করে।data-bs-slide-to: এই অ্যাট্রিবিউটটি নির্দিষ্ট স্লাইডে যাওয়ার জন্য ব্যবহৃত হয়। যেমন, data-bs-slide-to="0" প্রথম স্লাইডে নেবে, data-bs-slide-to="1" দ্বিতীয় স্লাইডে, এবং ইত্যাদি।carousel-inner: এটি সমস্ত স্লাইড ধারণ করে। এখানে প্রতিটি স্লাইডের জন্য একটি carousel-item ব্যবহার করা হয়। প্রথম স্লাইডের জন্য active ক্লাসটি ব্যবহার করা হয় যাতে এটি প্রথমে প্রদর্শিত হয়।carousel-caption থাকতে পারে যা স্লাইডের টেক্সট বা অন্যান্য কন্টেন্ট ধারণ করতে পারে।carousel-control-prev এবং carousel-control-next: এগুলি ব্যবহারকারীকে স্লাইডের মধ্যে নেভিগেট করতে সাহায্য করে। পূর্ববর্তী স্লাইডে যাওয়ার জন্য পূর্ববর্তী বাটন এবং পরবর্তী স্লাইডে যাওয়ার জন্য পরবর্তী বাটন ব্যবহার করা হয়।data-bs-ride="carousel" অ্যাট্রিবিউটটি যুক্ত করুন।var myCarousel = document.querySelector('#carouselExampleIndicators')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000, // স্লাইড পরিবর্তনের সময়কাল (মিলিসেকেন্ডে)
ride: 'carousel'
})
এটি ছিল মাল্টিপল স্লাইডস এবং স্লাইড ইনডিকেটরস ব্যবস্থাপনা করার একটি সহজ উদাহরণ। আপনি এই কনসেপ্টটি আরও কাস্টমাইজ করে আপনার ওয়েবসাইটে ব্যবহারের জন্য আরও উন্নত ফিচার যোগ করতে পারেন।
বুটস্ট্রাপ ৫ এর ক্যারোসেল (Carousel) একটি স্লাইডিং গ্যালারি বা স্লাইডশো উপাদান যা স্বয়ংক্রিয়ভাবে বা ব্যবহারকারীর হোভার বা ক্লিকের মাধ্যমে ইমেজ বা কন্টেন্ট পরিবর্তন করে। ক্যারোসেলকে অটো প্লে (Auto Play) করা যায় যাতে স্লাইডগুলো স্বয়ংক্রিয়ভাবে পরিবর্তিত হয়, এবং আপনি অ্যানিমেশন (Animation) ব্যবহার করে স্লাইডগুলোকে মসৃণভাবে ট্রানজিশন করতে পারেন।
বুটস্ট্রাপ ৫ এ ক্যারোসেল তৈরি করতে carousel ক্লাস ব্যবহার করা হয়। ক্যারোসেলটির মধ্যে ইমেজ, টেক্সট, এবং অন্যান্য কন্টেন্ট থাকতে পারে। আপনি ক্যারোসেলটি অটো প্লে (Auto Play) করতে পারেন এবং অ্যানিমেশন যুক্ত করতে পারেন যাতে স্লাইড পরিবর্তন একে অপরের সাথে মসৃণভাবে ঘটে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Carousel Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Carousel -->
<div id="carouselExampleAutoplay" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2000">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 1">
<div class="carousel-caption d-none d-md-block">
<h5>স্লাইড ১</h5>
<p>এটি স্লাইড ১ এর বর্ণনা।</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 2">
<div class="carousel-caption d-none d-md-block">
<h5>স্লাইড ২</h5>
<p>এটি স্লাইড ২ এর বর্ণনা।</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 3">
<div class="carousel-caption d-none d-md-block">
<h5>স্লাইড ৩</h5>
<p>এটি স্লাইড ৩ এর বর্ণনা।</p>
</div>
</div>
</div>
<!-- ক্যারোসেল নিয়ন্ত্রণ বাটন -->
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplay" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">আগে যান</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplay" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">পরে যান</span>
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
data-bs-ride="carousel": এটি ক্যারোসেল স্লাইডিং চালু করে এবং স্লাইডগুলো অটো প্লে হবে (অটো প্লে চালু করা হয়েছে)।data-bs-interval="2000": এখানে ২০০০ মিলিসেকেন্ড (২ সেকেন্ড) পরপর স্লাইড পরিবর্তন হবে। আপনি এটিকে পরিবর্তন করে আপনার প্রয়োজন অনুযায়ী সেট করতে পারেন।carousel-item active: প্রথম স্লাইডে active ক্লাসটি ব্যবহার করা হয় যাতে সেটি প্রথমে প্রদর্শিত হয়।carousel-control-prev এবং carousel-control-next: এগুলো ক্যারোসেল স্লাইডগুলোর মধ্যে নেভিগেট করার জন্য আগের এবং পরের বাটন।বুটস্ট্রাপ ৫ ক্যারোসেলটি অটো প্লে এবং অ্যানিমেশন এর জন্য বিভিন্ন কাস্টমাইজেশন অপশন প্রদান করে। আপনি স্লাইড ট্রানজিশনের টাইম এবং স্টাইল পরিবর্তন করতে পারেন। এখানে কিছু গুরুত্বপূর্ণ প্যারামিটার রয়েছে:
data-bs-ride="carousel": ক্যারোসেলটি অটো প্লে করার জন্য।data-bs-interval="milliseconds": স্লাইড পরিবর্তনের জন্য সময় সেট করতে। ডিফল্টভাবে ৫০০০ মিলিসেকেন্ড (৫ সেকেন্ড) হয়।বুটস্ট্রাপ ক্যারোসেল ডিফল্টভাবে ফেড-ইন, ফেড-আউট অ্যানিমেশন ব্যবহার করে, কিন্তু আপনি যদি ক্যাস্টম অ্যানিমেশন চান, তাহলে CSS অথবা JavaScript ব্যবহার করতে হবে।
<style>
.carousel-item-next, .carousel-item-prev, .carousel-item.active {
transition: transform 1s ease; /* স্লাইড ট্রানজিশন টাইম */
}
</style>
এই CSS কোডটি ক্যারোসেল স্লাইডগুলোকে এক ধরনের মসৃণ ট্রানজিশনে স্লাইড করতে সাহায্য করবে।
বুটস্ট্রাপ ৫ এর ক্যারোসেল সহজেই অটো প্লে এবং অ্যানিমেশন কাস্টমাইজ করা যায়। data-bs-ride="carousel" ব্যবহার করে অটো প্লে চালু করা যায়, এবং data-bs-interval দিয়ে স্লাইড পরিবর্তনের সময় নিয়ন্ত্রণ করা যায়। আপনি কাস্টম অ্যানিমেশন CSS বা JavaScript দিয়ে আরও উন্নত করতে পারেন।
বুটস্ট্রাপ ৫-এ রেসপন্সিভ এবং টাচ-এনেবল স্লাইডার তৈরি করা সহজ এবং কার্যকর। স্লাইডারগুলি সাধারণত ইমেজ বা কন্টেন্ট প্রেজেন্টেশন এবং স্লাইডিং ইফেক্ট দেখানোর জন্য ব্যবহৃত হয়। এই স্লাইডারগুলি মোবাইল ডিভাইসেও ভালভাবে কাজ করে, যেখানে ব্যবহারকারী স্লাইডারটি টাচ জেসচার দিয়ে নেভিগেট করতে পারেন। বুটস্ট্রাপ ৫-এ রেসপন্সিভ স্লাইডার তৈরি করতে Carousel কম্পোনেন্ট ব্যবহার করা হয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>রেসপন্সিভ স্লাইডার উদাহরণ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Carousel কনটেইনার -->
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<!-- স্লাইড ১ -->
<div class="carousel-item active">
<img src="https://via.placeholder.com/800x400?text=Image+1" class="d-block w-100" alt="...">
</div>
<!-- স্লাইড ২ -->
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400?text=Image+2" class="d-block w-100" alt="...">
</div>
<!-- স্লাইড ৩ -->
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400?text=Image+3" class="d-block w-100" alt="...">
</div>
</div>
<!-- পূর্ববর্তী ও পরবর্তী বাটন -->
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
id="carouselExampleIndicators": এটি স্লাইডারের জন্য একটি ইউনিক আইডি।class="carousel slide": এই ক্লাসটি স্লাইডারটি এনিমেটেড এবং স্লাইডেবল করে তোলে।data-bs-ride="carousel": এটি স্লাইডারটিকে স্বয়ংক্রিয়ভাবে চালু করে দেয়, যাতে স্লাইডগুলি নির্দিষ্ট সময় পর পর স্লাইড হয়ে যায়।carousel-indicators: এটি স্লাইডারটি নেভিগেট করতে ব্যবহৃত ছোট বাটনগুলোর একটি তালিকা। প্রতিটি বাটন একটি নির্দিষ্ট স্লাইডের জন্য নির্দেশক হিসেবে কাজ করে।carousel-item: প্রতিটি স্লাইডের জন্য এই ক্লাস ব্যবহার করতে হয়। প্রথম স্লাইডে active ক্লাস যোগ করা থাকে, যা প্রথম স্লাইডটি দেখানোর জন্য।img: এখানে স্লাইডের কন্টেন্ট হিসেবে ইমেজ ব্যবহার করা হয়েছে।carousel-control-prev এবং carousel-control-next: এই বাটনগুলি পূর্ববর্তী এবং পরবর্তী স্লাইডে যাওয়ার জন্য ব্যবহৃত হয়।carousel-control-prev-icon এবং carousel-control-next-icon: এগুলি বাটনগুলির আইকন।বুটস্ট্রাপ ৫-এ স্লাইডারটি স্বয়ংক্রিয়ভাবে টাচ-এনেবল হয়, অর্থাৎ মোবাইল ডিভাইসগুলোতে ব্যবহারকারীরা তাদের আঙুল দিয়ে স্লাইড পরিবর্তন করতে পারবেন। এর জন্য আলাদা কোনো কনফিগারেশন প্রয়োজন হয় না। এটি data-bs-ride="carousel" অ্যাট্রিবিউট দ্বারা স্লাইডারকে স্বয়ংক্রিয়ভাবে টাচ-এনেবল করে দেয়।
আপনি স্লাইডারের আন্দোলন, ট্রানজিশন টাইম এবং স্বয়ংক্রিয়ভাবে স্লাইড পরিবর্তন কাস্টমাইজ করতে পারেন। এর জন্য JavaScript দিয়ে প্যারামিটার সেট করা হয়।
<script>
var myCarousel = document.getElementById('carouselExampleIndicators')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 3000, // স্লাইড পরিবর্তনের সময় (3000 মিলিসেকেন্ড)
wrap: true // স্লাইড শেষ হলে আবার প্রথম স্লাইডে ফিরে যাবে
})
</script>
এই কোডটি স্লাইডারটির স্লাইড পরিবর্তন করার সময়টাকে 3 সেকেন্ডে সেট করবে এবং স্লাইড শেষ হলে আবার প্রথম স্লাইডে ফিরে আসবে।
বুটস্ট্রাপ ৫-এ রেসপন্সিভ এবং টাচ-এনেবল স্লাইডার তৈরি করা সহজ। Carousel কম্পোনেন্ট দিয়ে এটি তৈরি করা হয় এবং এতে স্বয়ংক্রিয়ভাবে টাচ সাপোর্ট থাকে। স্লাইডারটি মোবাইল এবং ডেস্কটপ উভয় ডিভাইসে সঠিকভাবে কাজ করে।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
